import React, { Component, Fragment } from 'react'
import { CardWrap, ContentWrap } from './ModalStyle'
import { Card, Button, Modal } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
class ModalComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Modals模型',
      visibleBasic: false,
      visibleTwo: false,
      visibleThree: false,
      visiblemodalTop20: false,
      visiblecenter: false,
      //点击蒙层是否允许关闭
      maskClosable: false,
    }
    //模态框
    this.showmodals = this.showmodals.bind(this)
    //第一个模态框
    this.handleOk_1 = this.handleOk_1.bind(this)
    this.handleCancel_1 = this.handleCancel_1.bind(this)
    this.handleOk_2 = this.handleOk_2.bind(this)
    this.handleCancel_2 = this.handleCancel_2.bind(this)
    this.handleOk_3 = this.handleOk_3.bind(this)
    this.handleCancel_3 = this.handleCancel_3.bind(this)
    this.handleOk_4 = this.handleOk_4.bind(this)
    this.handleCancel_4 = this.handleCancel_4.bind(this)
    //确认框
    this.handle_confirm_1 = this.handle_confirm_1.bind(this)
    this.handle_confirm_2 = this.handle_confirm_2.bind(this)
    this.handle_confirm_3 = this.handle_confirm_3.bind(this)
    this.handle_confirm_4 = this.handle_confirm_4.bind(this)
    this.handle_confim_ok_1 = this.handle_confim_ok_1.bind(this)
    this.handle_confim_cancle_1 = this.handle_confim_cancle_1.bind(this)
  }
  render() {
    return (
      <Fragment>
        <ContentWrap>
          {/* 基础知识点 card */}
          <CardWrap>
            <Card title="基础常用知识点">
              <p>一. 最基础的模态框有五个要素</p>
              <span>1.title标题</span> <span>&nbsp;&nbsp;</span>
              <span>2.visible属性</span> <span>&nbsp;&nbsp;</span>
              <span>3.onOk点击确认回调函数</span> <span>&nbsp;&nbsp;</span>
              <span>4.onCancle点击取消的回调函数</span>{' '}
              <span>&nbsp;&nbsp;</span>
              <span>5.maskClosable点击遮罩不起作用</span>
              <p>二. 确认框基础和点击回调</p>
              <span>
                属性多了个icon图标
                属性和上面差不多只不过特别留意回调函数他得写成箭头函数
              </span>
            </Card>
          </CardWrap>
          {/* 基础模态框 */}
          <CardWrap>
            <Card title="基础模态框">
              <Button
                type="primary"
                onClick={() => {
                  this.showmodals(1)
                }}
              >
                open
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  this.showmodals(2)
                }}
              >
                自定义页脚
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  this.showmodals(3)
                }}
              >
                顶部20PX弹框
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  this.showmodals(4)
                }}
              >
                水平垂直居中
              </Button>
            </Card>
          </CardWrap>
          {/*信息确认框*/}
          <CardWrap>
            <Card title="信息确认框">
              <Button type="primary" onClick={this.handle_confirm_1}>
                Confirm
              </Button>
              <Button type="primary" onClick={this.handle_confirm_2}>
                Info
              </Button>
              <Button type="primary" onClick={this.handle_confirm_3}>
                Success
              </Button>
              <Button type="primary" onClick={this.handle_confirm_4}>
                Warning
              </Button>
            </Card>
          </CardWrap>
        </ContentWrap>
        {/* 模态框第一个 */}
        {/*自定义页脚*/}
        <Modal
          visible={this.state.visibleTwo}
          title="自定义页脚"
          onOk={this.handleOk_2}
          onCancel={this.handleCancel_2}
          maskClosable={this.state.maskClosable}
          footer={[
            <Button key="back" onClick={this.handleCancel_2}>
              返回
            </Button>,
            <Button key="submit" type="primary" onClick={this.handleOk_2}>
              提交
            </Button>,
          ]}
        >
          <p>这就是自定义页脚</p>
        </Modal>
        {/*距离顶部20px*/}
        <Modal
          title="距离顶部20PX"
          style={{ top: 20 }}
          visible={this.state.visiblemodalTop20}
          maskClosable={this.state.maskClosable}
          onOk={this.handleOk_3}
          onCancel={this.handleCancel_3}
        >
          <p>距离顶部20PX</p>
        </Modal>
        {/*垂直居中*/}
        <Modal
          title="垂直居中"
          centered
          visible={this.state.visiblecenter}
          maskClosable={this.state.maskClosable}
          onOk={this.handleOk_4}
          onCancel={this.handleCancel_4}
        >
          <p>垂直居中弹框</p>
        </Modal>
      </Fragment>
    )
  }
  showmodals(value) {
    let _this = this
    switch (value) {
      case 1:
        _this.setState({
          visibleBasic: true,
        })
        break
      case 2:
        _this.setState({
          visibleTwo: true,
        })
        break
      case 3:
        _this.setState({
          visiblemodalTop20: true,
        })
        break
      case 4:
        _this.setState({
          visiblecenter: true,
        })
        break
      default:
        break
    }
  }
  handleOk_1() {
    console.log('点击了ok')
    this.setState({
      visibleBasic: false,
    })
  }
  handleCancel_1() {
    console.log('点击了取消')
    this.setState({
      visibleBasic: false,
    })
  }
  handleOk_2() {
    console.log('点击了ok')
    this.setState({
      visibleTwo: false,
    })
  }
  handleCancel_2() {
    console.log('点击了取消')
    this.setState({
      visibleTwo: false,
    })
  }
  handleOk_3() {
    console.log('点击了ok')
    this.setState({
      visiblemodalTop20: false,
    })
  }
  handleCancel_3() {
    console.log('点击了取消')
    this.setState({
      visiblemodalTop20: false,
    })
  }
  handleOk_4() {
    console.log('点击了ok')
    this.setState({
      visiblecenter: false,
    })
  }
  handleCancel_4() {
    console.log('点击了取消')
    this.setState({
      visiblecenter: false,
    })
  }
  handle_confirm_1() {
    Modal.confirm({
      title: '确认框',
      icon: <ExclamationCircleOutlined />,
      content: '这就是提示内容',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        this.handle_confim_ok_1()
      },
      onCancel: () => {
        this.handle_confim_cancle_1()
      },
    })
  }
  handle_confirm_2() {
    Modal.info({
      title: 'info提示框',
      icon: <ExclamationCircleOutlined />,
      content: '这就是提示内容',
      okText: '确认',
      cancelText: '取消',
    })
  }
  handle_confirm_3() {
    Modal.success({
      title: 'success成功提示框',
      icon: <ExclamationCircleOutlined />,
      content: '这就是提示内容',
      okText: '确认',
      cancelText: '取消',
    })
  }
  handle_confirm_4() {
    Modal.warn({
      title: 'warn警示提示框',
      icon: <ExclamationCircleOutlined />,
      content: '这就是提示内容',
      okText: '确认',
      cancelText: '取消',
    })
  }
  handle_confim_ok_1() {
    console.log('确认框点击了')
  }
  handle_confim_cancle_1() {
    console.log('确认框点击1取消')
  }
}

export default ModalComponent
